<template>
    <div class="search-layout forDocument">
        <div class="search-input-layout">
            <el-input class="seatch-input" v-model="searchInput" placeholder="搜索关键字" @keyup.native.enter="search" @input="input"></el-input>
            <div class="clear" @click="clear" v-if="showList">
                <i class="el-icon-circle-close"></i>
            </div>
        </div>
        <div class="search-list-layout" width="250" v-if="showList">
            <div class="empty" v-if="!searchList.length">暂未查询到数据</div>
            <div class="file" v-for="doc in searchList" :key="doc.docId" :class="{'active' : activeId == doc.docId}" @click="active(doc)">
                <!-- <div class="folderCount" style="width: 250px;">标题：{{doc.title}}</div> -->
                <div class="file-box" slot="reference">
                    <span class="state" :class="staticClass[doc.status]">
                        <i class="el-icon-star-on"></i>
                    </span>
                    <!-- <span class="file-type" :class="typeClass[doc.type]">{{doc.type}}</span> -->
                    <span class="file-title">{{doc.title}}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            activeId: '',
            searchInput: '',
            showList: false,
            staticClass: {
                'orange': 'text_orange',
                'blue': 'text_blue',
                'red': 'text_red',
                'green': 'text_green',
                'gray': 'text_gray',
                undefined: 'text_transparent',
                null: 'text_transparent',
            },
            searchList: [],
        }
    },
    methods: {
        active(item) {
            this.activeId = item.docId;
            this.$store.dispatch('doc_tree/setActiveId', item.docId)
        },
        search() {
            window.action.doc.doc.search(this.searchInput).then((res) => {
                this.searchList = res;
            });
            this.showList = true;
        },
        clear() {
            this.showList = false;
            this.searchList = [];
            this.searchInput = '';
        },
        input() {
            if (!this.searchInput) {
                this.clear();
            };
        },
    },
}

</script>


<style scoped>

</style>